<template>
  <div>
    <el-dialog :visible.sync="modifyDialogVisibility">
      <template #title>
        <span>修改请假条</span>
      </template>
      <el-form
        ref="modifyApply"
        class="modifyApply"
        :model="modifyApply"
        :rules="rules"
        label-position="right"
        label-width="auto"
      >
        <el-form-item prop="leaveId" label="假条ID：">
          <span>{{ modifyApply.leaveId }}</span>
        </el-form-item>
        <el-form-item prop="leaveType" label="请假类型：">
          <el-radio-group v-model="modifyApply.leaveType">
            <el-radio v-for="e in leaveTypes" :label="e.value" :key="e.index">{{
              e.text
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="reason" label="请假原因：">
          <el-input type="textarea" :rows="3" v-model="modifyApply.reason">
          </el-input>
        </el-form-item>
        <el-form-item prop="startTime" label="请假开始时间：">
          <el-date-picker v-model="modifyApply.startTime"></el-date-picker>
        </el-form-item>
        <el-form-item prop="endTime" label="请假结束时间：">
          <el-date-picker v-model="modifyApply.endTime"></el-date-picker>
        </el-form-item>

        <el-form-item prop="applyTime" label="申请时间：">
          <span>{{ modifyApply.applyTime }}</span>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="modifyApplySubmit()"
            >提交
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => (modifyDialogVisibility = false)"
            >放弃修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import New from './components/New.vue';
import {leaveModuleApi} from "@/api/apis";
import { mapState } from "vuex";
export default {
  name: "ModifyLeaveApply",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      modifyApply: {
        leaveId: 30,
        leaveType: "sickLeave",
        reason: "go开发太忙了请假",
        startTime: "2021-06-30T16:00:00",
        endTime: "2021-07-27T06:40:33.163",
        applier: "anonymous007",
        applyState: "saved",
        applyTime: "2021-07-28T08:51:13.358",
        auditState: "notAudit",
        auditor: null,
        auditorWord: null,
      },
      modifyDialogVisibility: false,
      rules: {
        startTime: [
          { required: true, message: "请输入请假开始时间", trigger: "change" },
          { validator: this.validateTime, trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请输入请假结束时间", trigger: "change" },
          { validator: this.validateTime, trigger: "change" },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    ...mapState(["leaveTypes"]),
  },
  created() {},
  mounted() {
  },
  methods: {
    sampleM() {},
    /*   setModifyApply(entity){
      this.modifyApply = entity;
    },
    setDialogVisible(b){
      this.modifyDialogVisibility=b;
    },*/
    OpenLeaveApply(entity) {
      this.modifyApply = entity;
      this.$nextTick(() => {
        this.modifyDialogVisibility = true;
      });
    },
    modifyApplySubmit() {
      this.$refs.modifyApply.validate((valid) => {
        if (valid) {
          // this.$http({
          //   method: "put",
          //   url: "/leaveAbout/leave/modify",
          //   data: this.modifyApply,
          // })
          leaveModuleApi.leaveModifyApi(this.modifyApply)
          .then(
            (res) => {
              this.$message.warning(JSON.stringify(res.data));
              this.modifyDialogVisibility = false;
              // this.$parent.queryByCondition(1);
              this.$emit("postModify");
            },
            (error) => {
              console.log(
                ".modifyApply request error : " + error.response.status
              );
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
    validateTime(rules, value, callback) {
      let start = new Date(this.modifyApply.startTime);
      let end = new Date(this.modifyApply.endTime);
      if (start.getTime() > end.getTime()) {
        return callback(new Error("开始时间要小于结束时间"));
      }
      callback();
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
  .el-dialog {
    .el-form-item {
      /*margin-top: 25px;*/
      .el-textarea {
        width: 360px;
      }
    }
  }
</style>
